<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools>
        <template #before>
          <span>总共{{ total }}条数据</span>
        </template>
        <template #after>
          <el-button
            type="primary"
            size="mini"
            @click="$router.push('/import')"
          >导入员工
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="exportEmployees"
          >导出员工
          </el-button>
          <el-button
            type="warning"
            size="mini"
            @click="showDialog = true"
          >新增员工
          </el-button>
        </template>
      </PageTools>

      <el-table
        v-loading="loading"
        border
        :data="list"
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
        />
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="头像" align="center">
          <template #default="{row}">
            <!--展示头像组件-->
            <el-avatar
              :src="row.staffPhoto"
              :size="80"
              @click.native="handleShowImgDialog(row.staffPhoto)"
            >
              <!--如果avatar没有渲染出图片，通过默认插槽指定默认的图片地址-->
              <img src="~@/assets/common/bigUserHeader.png" alt="">
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column
          label="聘用形式"
          prop="formOfEmployment"
          :formatter="formatter"
        />
        <el-table-column label="部门名称" prop="departmentName" />
        <el-table-column label="入职时间" prop="timeOfEntry">
          <template #default="{row}">
            {{ row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态">
          <template #default="{row}">
            <el-switch
              :value="row.enableState !== 1"
              active-color="green"
              inactive-color="#ff4949"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="{row}">
            <el-row type="flex" justify="space-between">
              <el-link type="primary" @click="$router.push(`employees/detail/${row.id}`)">查看</el-link>
              <el-link type="primary">转正</el-link>
              <el-link type="primary">调岗</el-link>
              <el-link type="primary">离职</el-link>
              <el-link type="primary" @click="handleShowRoleDialog(row.id)">角色</el-link>
              <el-link
                v-auth="'DELETE_EMP'"
                type="primary"
                @click="del(row.id)"
              >删除</el-link>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区域-->
      <el-row
        type="flex"
        justify="center"
        style="height: 80px"
        align="middle"
      >
        <el-pagination
          :current-page="page.page"
          :page-size="page.size"
          :total="total"
          background
          layout="prev,pager,next"
          @current-change="changePage"
        />
      </el-row>
    </div>
    <!--添加员工弹层-->
    <add-employee :show-dialog.sync="showDialog" />
    <!--二维码预览弹层-->
    <el-dialog :visible.sync="showImgDialog" title="二维码预览">
      <el-row type="flex" justify="center">
        <!--用于后续放置二维码-->
        <canvas ref="canvasRef" />
      </el-row>
    </el-dialog>
    <!--展示角色弹层组件-->
    <assign-role
      ref="assignRoleRef"
      :user-id="userId"
      :show-role-dialog.sync="showRoleDialog"
    />
  </div>
</template>

<script>
import { delEmployeesApi, getEmployeesListApi } from '@/api/employees'
// 引入映射表文件
import Employees from '@/api/constant/employees'
import checkPermission from '@/mixin/checkPermission'
// 引入弹层组件
import AddEmployee from '@/views/employees/components/add-employee.vue'
import { formatDate } from '@/filters'
import QrCode from 'qrcode'
import AssignRole from '@/views/employees/components/assign-role.vue'

export default {
  components: { AssignRole, AddEmployee },
  mixins: [checkPermission],
  data() {
    return {
      showRoleDialog: false, // 控制角色弹层的展示或隐藏
      showImgDialog: false,
      showDialog: false,
      loading: false,
      page: {
        page: 1, // 获取第几页的数据
        size: 10 // 获取几条
      },
      list: [], // 具体的数据
      total: 0, // 数据总共多少条，接口返回总共的数据条数
      userId: null
    }
  },
  created() {
    this.getEmpList()
  },
  methods: {
    handleShowRoleDialog(id) {
      // 传递过来的id存储到data里面，传递给弹层组件
      this.userId = id
      // 点击角色按钮展示分配角色弹层
      this.showRoleDialog = true
      // 父组件调用子组件获取当前用户详情的方法，用于把角色信息做默认勾选
      this.$refs.assignRoleRef.getCurrentRole(id)
    },
    // 当数据发生变化之后，对应的dom更新并不是同步更新，而是通过nextTick注册成了异步回调
    handleShowImgDialog(imgUrl) {
      // 点击图片展示预览图片的弹层
      if (!imgUrl) return this.$message.warning('当前用户没有头像数据')
      this.showImgDialog = true
      // QrCode.toCanvas('canvas的dom标签', '需要包含到二维码里面的信息')
      // console.log(this.$refs.canvasRef)
      this.$nextTick(() => {
        QrCode.toCanvas(this.$refs.canvasRef, imgUrl)
      })
    },
    async exportEmployees() {
      //   点击了导出的按钮时候会触发
      //   import函数会动态的导入一个文件
      //   当这个函数触发的时候再去加载这个文件
      //   import函数返回的是一个promise
      //   promise成功的结果就是文件内部导出的内容

      // 异步操作并发执行的时候，可以用到promise.all
      // 所有的promise成功以后获取到所有promise成功结果组成的数组，数组的顺序按照promise传入的顺序排列

      // 使用解构，解构出异步操作返回的数据

      const headers = {
        '手机号': 'mobile',
        '姓名': 'username',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const [{ export_json_to_excel }, { rows }] = await Promise.all([
        import('@/vendors/Export2Excel.js'), // 1、导入文件的异步函数
        getEmployeesListApi({ page: 1, size: this.total }) // 2、请求接口数据的异步函数
      ])
      const data = this.formatJson(headers, rows)
      export_json_to_excel({
        // 获取键名组成的数组
        // ['手机号', '姓名', '入职日期', ...]
        header: Object.keys(headers), // 表头 必填
        data: data, // 具体数据 必填
        filename: 'excel-list', // 非必填
        autoWidth: true, // 非必填
        bookType: 'xlsx' // 非必填
      })
      // console.log(res)
    },
    formatJson(headers, rows) {
      console.log(headers)
      // 原始数据 [{mobile: '', username: '', timeOfEntry: '', ...}, {mobile: '', username: '', timeOfEntry: '', ...}, ...]
      // ['手机号', '姓名', '入职日期' ...]
      // 处理的结果： [ ['手机号', '姓名', '入职日期' ...], ['232', '张三', '2020-10-10', ...],['232', '张三', '2020-10-10', ...]]
      // console.log(rows)
      // [['手机号', '工号'], ['手机号', '工号'],['手机号', '工号'], ['手机号', '工号'], ['手机号', '工号']]
      // console.log(arr)
      return rows.map(item => {
        // item: {mobile: '232323', username: '张三'}
        // Object.keys(headers)  => ['手机号', '工号']
        // [ ['232323', '张三'],  ['手机号', '工号']]
        return Object.keys(headers).map(key => {
          // 如果当前的key是时间，需要格式化之后再返回
          if (['timeOfEntry', 'correctionTime'].includes(headers[key])) {
            // 证明当前的key是时间的key，需要把时间格式化之后再返回
            // item[headers[key]]当前项的值，传递给formatDate方法处理之后再进行赋值
            return formatDate(item[headers[key]])
          }
          if (headers[key] === 'formOfEmployment') {
          //   '1'  '2'
            const currentObj = Employees.hireType.find(empItem => empItem.id === +item[headers[key]])
            // 如果current.value存在,直接return，如果不存在返回未知
            return currentObj?.value || '未知'
          //   当前项
          }
          // 如果key是聘用形式的key，需要格式化之后再返回
          return item[headers[key]]
        })
      })
    },
    async del(id) {
      await this.$confirm('是否确认删除？')
      await delEmployeesApi(id)
      this.$message.success('删除成功')
      this.getEmpList()
    },
    // 添加给单元格的列属性，当前属性对应的函数返回什么页面就会展示什么
    formatter(row, column, cellValue, index) {
      // 根据当前表格的数据进行动态的判断
      // cellValue: 当前单元格的值
      const currentObj = Employees.hireType.find(item => item.id === +cellValue)
      // 如果数据查找不到，currentObj是undefined
      // console.log(currentObj) // 数组成员/对象格式
      return currentObj?.value || '未知'
    },
    // 请求接口数据渲染table表格
    async getEmpList() {
      // 请求数据之前开启loading
      this.loading = true
      const res = await getEmployeesListApi(this.page)
      console.log(res)
      this.list = res.rows
      // 接口返回的数据条数赋值给data里面的total
      this.total = res.total
      // 获取完数据关闭loading
      this.loading = false
    },
    // 点击切换页码之后会触发changePage事件
    changePage(page) {
      // 切换之后最新的页码数
      console.log(page)
      this.page.page = page
      //   重新调用接口
      this.getEmpList()
    }
  }
}
</script>

<style>

</style>
